import React from 'react'
import { Layout, Menu, Icon} from 'antd';
import { Router, Route, Switch, Link,Avatar,Redirect} from 'dva/router';

const { Header, Sider, Content } = Layout;
import LinkMana from './routes/LinkMana'
import style from './Home.css'
import Menus from './components/Layout/Menu'
import UserAvatar from './routes/Home/UserAvatar'
import {routesArr,routesJson} from './utils/router'
import ServerMana from './routes/userMana/serverMana'
import RoleMana from './routes/userMana/RoleMana'
import State from './routes/database/StateMana'
import Organization from './routes/userMana/Organization'
import UserList from './routes/userMana/UserList'
import devmacMana from './routes/devmac/devmac'
import userType from './routes/userMana/userType'
import OAuthMana from './routes/OAuth/OAuthMana'
import {userMe} from './services/userList'
import {severActionList} from './services/home'
import Welcome from './routes/Home/Welcome'

import logo from '../public/logo.png'
import NoMatch from './routes/error/404'
import NoRole from './routes/error/403'
import {getActionArr, actionJson} from './utils/hasAction'
import dynamic from 'dva/dynamic';


const getIsRole = (name)=>{
  const url = name.match.url;
  const key = url.substring(1);
  const actions = JSON.parse(sessionStorage.getItem('actionJson')) ;

  return actions[key];
}

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    getIsRole(props) ? (
      <Component {...props}/>
    ) : (
      <Redirect to={{
        pathname: '/403',
        state: { from: props.location }
      }}/>
    )
  )}/>
)
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
class Home extends React.Component{
  state = {
      collapsed: false,
      menuKey:'',
      menuName:'',
      actionlist:[],
      flag:false,
      userAction:[],
      routesArr:[],
    };
    toggle = () => {
      this.setState({
        collapsed: !this.state.collapsed,
      });
    }
    componentWillMount() {
      let pathName = location.hash
     
      let key = pathName.split("/");
      this.setState({
        menuKey:key[1],
        menuName:routesJson[key[1]]
      })
      userMe().then(data=>{
        console.log('user',data)
        this.setState({
          userAction:data.data.action_id_list
        })
        allAction = data.data.action_id_list;
        mapBoomUser = data.data;
      })

      severActionList().then(data=>{
        console.log('action',data)
        this.setState({
          actionlist:data.data,
          
        })

        const arr = getActionArr(routesArr,this.state.actionlist, this.state.userAction)
        console.log(actionJson,111)
        this.setState({
          routesArr:arr,
          flag:true
        })
      })
      // Promise.all([userMe(),severActionList()
        
      //   ]).then(data=>{
      //   console.log(data)
      //   this.setState({
      //     userAction:data[0].data.action_id_list,
      //     actionlist:data[1].data,
      //   })
      //   allAction = data[0].data.action_id_list;
      //   mapBoomUser = data[0].data;
      //   const arr = getActionArr(routesArr,this.state.actionlist, this.state.userAction)
      //     console.log(actionJson,111)
      //     this.setState({
      //       routesArr:arr,
      //       flag:true
      //     })
      // })
    }
    changeMenu (menuKey){
      this.setState({
          menuName:routesJson[menuKey]
      })
    }
    render(){
      const userMenu =(
        <Menu
        defaultSelectedKeys={['1']}
        defaultOpenKeys={['sub1']}
        mode="inline"
        theme="dark"
        inlineCollapsed={this.state.collapsed}
      >
      <SubMenu title={<span className={style.avatar}><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" alt="头像" /><i className="on bottom b-white" /></span>}>
          {/* <Menu.Item key="setting:1">你好 -</Menu.Item> */}
          <Menu.Item key="setting:2">个人信息</Menu.Item>
          <Menu.Item key="logout"><span onClick={this.logout}>退出登录</span></Menu.Item>
         
        </SubMenu>
      </Menu>
      )
      return (
        <Layout style={{height:'100%',margin:'0'}}>
          <Sider
            trigger={null}
            collapsible
            collapsed={this.state.collapsed}
            style={this.state.collapsed?"":{overflowY:'auto'}}
          >
          
            <div className={style.logo}>
              <a>
                <img src={logo} />
                {this.state.collapsed ?'':<h1>mapboom</h1>}
              </a>
            </div>
            
            {this.state.collapsed?userMenu:<UserAvatar />}
            {this.state.flag?<Menus routesArr={this.state.routesArr} changeMenu={this.changeMenu.bind(this)} menuKey={this.state.menuKey} />:''}
          </Sider>
          <Layout>
            <Header style={{ background: '#fff', padding: 0 }}>
              <Icon
                className={style.trigger}
                type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
                onClick={this.toggle.bind(this)}
              />
              <span className={style.menuName}>{this.state.menuName}</span>
            </Header>
            <Content style={{height:'100%'}} >
              <Switch>
                {/* <Route path="/LinkMana" component={LinkMana} /> */}
                <PrivateRoute path="/ServerMana" component={ServerMana}/>
                <PrivateRoute path="/RoleMana" component={RoleMana} />
                <PrivateRoute path="/State" component={State} />
                <PrivateRoute path="/Organization" component={Organization} />
                <PrivateRoute path="/UserList" component={UserList} />
                <PrivateRoute path="/userType" component={userType} />
                <PrivateRoute path="/LinkMana" component={LinkMana}/>
                <PrivateRoute path="/devmacMana" component={devmacMana} />
                <PrivateRoute path="/OAuthMana" name="OauthMana" component={OAuthMana}/>
                <Route path="/" component={Welcome} exact />
                
                <Route path="/403" component={NoRole}/>
                <Route component={NoMatch}/>
              </Switch>
            </Content>
          </Layout>
        </Layout>
      )
    }
}

export default Home
